<script>
import { h } from 'vue'
import Emitter from '../../../../tools/emitter'

let seedId = 0

export default {
  componentName: 'window-content-col',
  mixins: [Emitter],
  data() {
    return {
      colId: undefined
    }
  },
  computed: {
    parent() {
      return this.findParent('windowContent')
    },
    colStyle() {
      try {
        if (this.parent) {
          const colIndex = this.parent.findColIndex(this)
          const colNum = this.parent.cols.length
          const gutter = this.parent.gutter
          if (colNum > 1) {
            let colStyle = {
              'padding-left': gutter / 2 + 'px',
              'padding-right': gutter / 2 + 'px',
              'padding-top': gutter + 'px',
              'padding-bottom': gutter + 'px'
            }
            if (colIndex === 0) {
              colStyle['padding-left'] = gutter + 'px'
            } else if (colIndex === colNum - 1) {
              colStyle['padding-right'] = gutter + 'px'
            }
            return colStyle
          } else {
            return { padding: gutter + 'px' }
          }
        }
      } catch (error) {}
      return {}
    }
  },
  created() {
    this.colId = 'col-' + seedId++
  },
  mounted() {
    this.parent.addCol(this)
  },
  unmounted() {
    this.parent.removeCol(this)
  },
  render() {
    return h('div', { class: 'content-col', style: this.colStyle }, [
      h('div', { class: 'content-col-box' }, [h(this.$slots.default)])
    ])
  }
}
</script>

<style lang="scss"></style>
../../../../tools/emitter
